<template>
<div class="previewBox">

    <div class="PreviewHead" v-if="CountDown<0">
        <div class="coverImgWrap">
          <image @click="upLoadImg" :src="coverImg" class="liveCover"></image>
          <text class="liveCoverTipText">更换封面</text>
        </div>
        <div>
          
          <div class="sortWrap" style="margin-bottom:7px">
              <input v-model="liveTitle" class="colorWhite nameInput" type="text" placeholder="请输入副标题" maxlength="12" min="1" @blur="onBlur" @keyboard="onKeyBoard" />
          </div>

            <div class="sortWrap" @click="minibarRightButtonClick">
                <text class="colorWhite"> {{sortName?sortName:'选择商品类型'}} </text>
                <wxc-icon name="more_unfold" size="xs" class="colorWhite"></wxc-icon>
            </div>
        </div>
    </div>
    <div class="CountDownWrap" v-if="CountDown>0">
        <text class="CountDownWrapText">{{CountDown}}</text>
    </div>
    <div class="previewBottom" v-if="CountDown<0" :style="{marginTop:previewMarginTop+'upx'}">
        <div class="previewBottomSort">
            <div class="bottomItem" v-for="(item,index) in bottomList" :key="index" @click="previewSetting(index)">
                <image :src="item.icon" class="bottomItemIcon"></image>
                <text class="colorWhite">{{item.name}}</text>
                <span v-if="item.isNew" class="newDot"></span>
            </div>
        </div>
<!-- 开启视频直播666 -->
        <div class="openLiveBtn" @click="submitData()">
            <text class="openLiveBtnText">开启视频直播</text>

        </div>
    </div>

    <wxc-popup :show="isSortShow" ref="sortPop" popup-color="rgba(0,0,0,0)" @wxcPopupOverlayClicked="popupOverlayBottomClick" pos="bottom" height="600">
        <scroller class="sortScroller">
            <div v-for="(item,index) of typeList" :key="index" class="sortItem" @click="selectItem(item.id,item.type_name)">
                <text class="sortItemText">{{item.type_name}}</text>
            </div>
        </scroller>
    </wxc-popup>
  <wxc-loading :show="isLoadingShow" v-if="false" :loading-text="loadingText"></wxc-loading>
</div>
</template>

<script>
import {WxcButton, WxcIcon, WxcLoading, WxcPopup, WxcTag} from 'weex-ui'
import liveJS from '../live'

const modal = weex.requireModule('modal')
export default {
    name: 'livePreview',
    mixins: [liveJS],
    data() {
        return {
            liveTitle: "",
          isLoadingShow:false,
          loadingText:'',
       
            popoverPosition: {
                x: 186,
                y: 320
            },
            popoverArrowPosition: {
                pos: 'top',
                x: 130
            },

            coverImg: '',
            httpCoverImg:'',
            CountDown: -1,
      
            typeList: [],
            isSortShow: false,
            sortID: '',
            sortName: "",
            previewMarginTop: 0
        }
    },
    components: {
        WxcIcon,
        WxcButton,
        WxcTag,
        WxcPopup,
      WxcLoading
    },
    mounted() {
      this.previewMarginTop = uni.getSystemInfoSync().windowHeight- 100
        this.getLiveSort()
        console.log(uni.getSystemInfoSync().windowWidth)
      this.loadingText ="正在上传中..."
    },
    computed:{
        getLiveCover:{
          get(){
            return this.baseUrl +this.coverImg
          }
     
        },
      bottomList(){
           return   [{
              icon: '/static/images/live/icon-transform.png',
              name: "翻转",
              isNew: false,
            }, {
              icon: '/static/images/live/icon-beauty.png',
              name: "美化",
              isNew: false,
            }, {
              icon: '/static/images/live/icon-cart.png',
              name:  "商品",
              isNew: false,
            }, {
              icon: '/static/images/live/icon-share.png',
              name: "分享",
              isNew: false,
            },
              {
                icon: '/static/images/live/icon-setting.png',
                name:  "设置",
                isNew: false,
              }]
      }
    },

    methods: {
        minibarRightButtonClick() {
            this.isSortShow = true
        },
        popupOverlayBottomClick() {
            this.isSortShow = false;
        },



        getLiveSort() {
            this.http('api/Alive/gettype', {}).then(res => {
                this.typeList = res.data.data

            })
        },
        onBlur(e) {
            console.log(e);
        },
        onKeyBoard(e) {
            console.log(e);
        },
        // 选择分类
        selectItem(id, name) {
            this.sortID = id
            this.sortName = name
            this.$refs.sortPop.hide()
        },

        // 直播间信息表单提交事件
        submitData() {
            const data = {
                cover: this.coverImg,
                typeid: this.sortID,
                title: this.liveTitle,
            }
            // 必传参数检测
   
            const list = Object.values(data)
             const tips= [
                 "请上传直播封面图",
                 "请选择直播分类",
                 "请输入直播间副标题",
             ]
            for (let index = 0; index < list.length; index++) {
                if (list[index].length === 0) {
                    modal.toast({
                        message: tips[index],
                        duration: 0.3
                    })
                    return
                }
            }

            this.http('api/Alive/launchalive', data).then(res => {
                const status = res.data.status
                const mess = res.data.mess
                console.log(res);
                if (status === 200) {
                    uni.setStorage({
                        key: 'pushUrl',
                        data: res.data.data,
                        success: () => {
                            this.openLivePlayer()
                        }
                    });
                } else if (status === 400) {
                    modal.confirm({
                        message: mess,
                        duration: 0.3
                    }, function (value) {
                        if (value === "OK") {
                            uni.navigateTo({
                                url: '/pagesB/login/login'
                            });
                        }
                    })
                } else {
                    // 抛出异常
                    modal.toast({
                        message: mess,
                        duration: 0.5
                    })
                }
            })
        },
        //  通知开播事件
        openLivePlayer() {
            //倒计时
            this.CountDown = 3
            let countdown =  setInterval(() => {
              this.CountDown--
              if (this.CountDown < 1) {
                clearInterval(countdown)
                return  this.$parent.startLive()
              }
            }, 1000)
        },

        // 上传直播封面图
        upLoadImg() {
            console.log(this.baseUrl)
            uni.chooseImage({
                count: 1,
                sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                success: imgData => {
                   this.isLoadingShow= true
                    uni.uploadFile({
                        url: this.baseUrl + '/api/find/uploadspic',
                        filePath: imgData.tempFilePaths[0],
                        name: 'file',
                        success: res => {
                            // console.log(,'上传风');
                            // const data = JSON.parse(data)

                            this.coverImg =JSON.parse(res.data).data.wz  //dz不带域名   wz带域名
                            // uni.setStorageSync('hasCoverImg',data.data.src.wz )

                          this.isLoadingShow= false
                        },
                        fail: err => {

                        },complete:req=>{

                      }
                    })
                }
            });

        },
        // 时间格式化  api_token加密用
        formartDate() {
            const date = new Date();
            const year = date.getFullYear();
            const month =
                parseInt(date.getMonth()) + 1 > 9 ?
                parseInt(date.getMonth()) + 1 :
                "0" + (parseInt(date.getMonth()) + 1);
            const day = date.getDate() > 9 ? date.getDate() : "0" + date.getDate();

            return year + "-" + month + "-" + day;
        },
        previewSetting(index) {
            this.$emit('previewSetting', index)
        }
    }

}
</script>

<style scoped>

.previewBox {
    position: fixed;
    width: 700upx;
    left: 25upx;
    padding: 30upx 50upx;
    right: 0;
    bottom: 0;
    top: 0;
    margin: 140upx 0;

}

.PreviewHead {
    flex-direction: row;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 12upx;
    padding: 8upx;
}
.coverImgWrap{
  position: relative;
  width: 110upx;
  height: 110upx;
  margin: 0 8upx;
}
.liveCover {
    width: 110upx;
    height: 110upx;

    border-radius: 6upx;
  overflow: hidden;
  background-color: transparent;
}
.liveCoverTipText{

  font-size: 20upx;
  position: absolute;
  left: 0;
  bottom: 0;
  color: #fff;
  background-color: rgba(0,0,0,0.3);
  text-align: center;
  width: 110upx;
  padding: 4upx 0;
}
.title {
    font-size: 32upx;
    font-weight: 600;
    margin-bottom: 20upx;
}

.iconEdit {
    width: 30upx;
    height: 30upx;
}

.colorWhite {
    color: #fff;
    font-size: 26upx;
}

.sortWrap {
    flex-direction: row;
    align-items: center;


}

.previewBottom {
    flex: 1;
}

.previewBottomSort {
    flex-direction: row;
    flex-wrap: wrap;

}

.bottomItem {
    width: 115upx;
    justify-content: center;
    align-items: center;
    padding: 25upx;
    position: relative;
}

.bottomItemIcon {
    width: 60upx;
    height: 60upx;
    margin-bottom: 14upx;
}

.openLiveBtn {
    text-align: center;
    background-color: #fa3f3f;
    border-radius: 400upx;
    height: 88upx;

    margin-top: 20upx;
}

.openLiveBtnText {
    text-align: center;
    color: #fff;
    font-weight: 500;
    font-size: 32upx;
    line-height: 88upx;
}

.newDot {
    width: 12upx;
    height: 12upx;
    border-radius: 100px;
    background-color: yellow;
    position: absolute;
    top: 20upx;
    right: 20upx;
}

.CountDownWrap {
    width: 300upx;
    height: 300upx;
    border-radius: 400px;
    background-color: rgba(255, 255, 255, 0.3);
    position: fixed;
    top: 600upx;
    left: 230upx;
    justify-content: center;
    align-items: center
}

.CountDownWrapText {
    font-size: 120upx;
    color: #fff;
    font-weight: 800;
}

.nameInput {
    width: 420upx;
    height: 40upx;
    placeholder-color: #fff;
    font-size: 30upx;
    font-weight: 500;
  margin-left: 6upx;
}

.sortScroller {
    background-color: #fff;
    border-radius: 16upx;
    padding: 30upx 20upx;
  width: 750upx;
}

.sortItem {
    padding: 26upx 30upx;
    border-bottom-width: 2upx;
    border-color: #f5f5f5;
    border-style: solid;
}

.sortItemText {
    font-size: 32upx;
    text-align: center;
}

</style>
